<template>
  <div style="display: flex; margin: auto; width: 1440px" v-if="item1Show">
    <!-- 左 -->
    <div style="font-size: 20px">
      <div style="
          width: 412px;
          height: 94px;
          box-shadow: 0px 0px 14px 0px rgba(96, 96, 96, 0.2);
          display: flex;
          padding: 20px;
          background-color: white;
          justify-content: space-between;
          
        ">
        <div style="display: flex; align-items: center; cursor: pointer" @click="order">
          <img src="@/assets/img/orderIcon.png" style="width: 50px; height: 50px">
          <div style="margin-left: 10px">我的订单></div>
        </div>
        <div style="width: 1px; height: 29px; border-left: 1px soild #cacaca"></div>
        <div style="display: flex; align-items: center; cursor: pointer" @click="pei">
          <img src="@/assets/img/orderIcon.png" style="width: 50px; height: 50px">
          <div style="margin-left: 10px">快速理赔></div>
        </div>
      </div>
      <div style="
          margin-top: 20px;
          padding: 26px;
          box-shadow: 0px 0px 14px 0px rgba(96, 96, 96, 0.2);
          width: 412px;
          height: 513px;
          background-color: white
        ">
        <div style="display: flex; align-items: center; justify-content: space-between">
          <div style="display: flex">
            <img src="@/assets/img/notice.png" style="width: 26px; height: 26px">

            <div style="margin-left: 10px">公告</div>
          </div>
          <div style="color: #9a9a9a; font-size: 16px; cursor: pointer" @click="toNotice">更多></div>
        </div>
        <div style="
            margin-top: 20px;
            width: 100%;
            border-bottom: 1px solid #ececec;
            margin-bottom: 20px;
          "></div>
        <div style="margin-bottom: 27px; cursor: pointer;" v-for="item in notice" :key="item.id"
          @click="noticeDetail(item)">
          <div style="font-size: 18px">{{ item.title }}</div>
          <div style="margin-top: 7px; font-size: 15px; color: #999999">
            {{ item.create_time }}
          </div>
        </div>
        <div v-if="notice.length <= 0" style="height: 430px;">
          <div
            style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">
            <img src="@/assets/img/nodata.png" style="object-fit: contain;height: 180px;" alt="" />
            <div style="color: #999999; font-size: 18px">暂无数据</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右 -->
    <div style="width: 1200px; display: flex; flex-wrap: wrap; font-size: 20px">
      <div style="
          margin-left: 20px;
          margin-bottom: 20px;
          box-shadow: 0px 0px 14px 0px rgba(96, 96, 96, 0.2);
          height: 304px;
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;background-color: white;
        " v-for="(item, index) in classifyList" :key="index" :class="index <= 1 ? 'one' : 'two'"
        @click="clickItem1(item)">
        <div :class="index <= 1 ? 'one' : 'two'" style="height: 180px;">
          <el-image :src="item.image" style="height: 180px;" :class="index <= 1 ? 'one' : 'two'" fit="cover"
            :lazy="true"></el-image>
          <!-- <img :src="item.image" style="height: 180px;width: 100%;" object-fit="cover"> -->
        </div>
        <div style="font-weight: bold; margin-top: 16px">{{ item.name }}</div>
        <div style="width: 288px; font-size: 16px; color: #979797; margin-top: 10px;text-align: center;">
          {{ item.memo }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  props: {
    classifyList: {},
    notice: {},
    item1Show: {}
  },

  data() {
    return {};
  },
  methods: {
    toNotice() {
      this.$router.push({
        path: "/index/index/notice",
      });
    },
    clickItem1(item) {

      this.$emit('clickItem1', item)
    },
    order() {
      this.$router.push({
        path: "/index/order/list",
      });
    },
    pei() {
      this.$router.push({
        path: "/index/pei/index",
      });
    },
    noticeDetail(item) {
      this.$router.push({
        path: '/index/index/notice-detail/' + item.id
      })
    }
  },
};
</script>
<style scoped>
.one {
  width: 492px;
}

.two {
  width: 320px;
}
</style>
